<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ page trimDirectiveWhitespaces="true" isELIgnored="false"
	session="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%--ctxPath--%>
<c:set var="ctxPath" value="${pageContext.request.contextPath}" />
<%--静态文件目录 --%>
<c:set var="staticPath" value="${ctxPath}/static" />
<!DOCTYPE html>
<html>
<%@include file="common/baseCss.jsp"%>
<link rel="stylesheet" href="${staticPath}/layui/css/layui.css" />
<link rel="stylesheet"
	href="${staticPath}/layui/css/modules/layim/layim.css" />
<%@include file="common/base.jsp"%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>客户注册</title>
<link rel="stylesheet" href="${staticPath}/assets/css/bootstrap.css" />
<link rel="stylesheet" href="${staticPath}/assets/css/font-awesome.css" />
<link href="${staticPath}/fms/css/register.css" rel="stylesheet"
	type="text/css" media="all" />
<script type="text/javascript"
	src="${staticPath}/jquery/jquery-2.1.4.min.js"></script>
<script type="text/javascript"
	src="${staticPath }/assets/js/jquery.form.js" charset="utf-8"></script>
<script type="text/javascript">
	var ctxPath = "${ctxPath }";
</script>

<style>
#error-style .Validform_checktip {
	text-align: right;
	width: 100%;
}

#error-style .fa {
	display: none
}
</style>
</head>

<body>
	<div class="header">
		<!--   <h1 class="headerLogo"> -->
		<%-- 	   <img alt="logo" style="" src="${staticPath}/fms/css/images/login_logo.png"/> --%>
		<!--   </h1> -->
	</div>

	<div id="main" style="background: #f5f4f4;">
		<div class="inner clearfix">
			<div class="register-form">
				<div class="form-bd">
					<form id="myform" name="regform" class="form-horizontal">
						<div class="form-title col-xs-12">用户注册</div>
						<div class="form-group clearfix">
							<label class="col-xs-3 control-label" for="userCode">用户号</label>
							<div class="col-xs-9 control-col">
								<input type="text" class="form-control"
									placeholder="请输入用户号，并且只能是数字" id="userCode" name="userCode"
									maxlength="30" />
							</div>
						</div>
						<div class="form-group clearfix">
							<label class="col-xs-3 control-label" for="userName">用户名</label>
							<div class="col-xs-9 control-col">
								<input type="text" class="form-control" placeholder="请输入用户名"
									id="userName" name="userName" maxlength="30" />
							</div>
						</div>
						<div class="form-group clearfix">
							<label class="col-xs-3 control-label">用户类型</label>
							<div class="col-xs-9 control-col">
								<select id="userType" class="input-sm col-sm-12" name="userType">
									<option value="">请选择用户类型</option>
									<option value="1">会计员</option>
									<option value="2">出纳员</option>
									<option value="3">管理员</option>
								</select>
							</div>
						</div>
						<div class="form-group clearfix">
							<label class="col-xs-3 control-label" for="password">密码</label>
							<div class="col-xs-9 control-col">
								<input type="password" class="form-control"
									placeholder="请设置您的密码" maxlength="24" id="password"
									name="password" datatype="*6-18" nullmsg="请输入您的密码"
									errormsg="请输入正确的密码" autocomplete="off" />
								<div class="slogon" style="margin-top: 5px;">6-16个字母、数字或者英文符号，区分大小写</div>
							</div>
						</div>
						<div class="form-group clearfix">
							<label class="col-xs-3 control-label" for="checkPassword">确认密码</label>
							<div class="col-xs-9 control-col">
								<input type="password" class="form-control" id="checkPassword"
									placeholder="请再次输入您的密码" maxlength="24" datatype="*"
									recheck="password" nullmsg="请输入您的密码" errormsg="您两次输入的账号密码不一致！"
									autocomplete="off" />
							</div>
						</div>
						<div class="form-group">
							<div class="control-col col-xs-12">
								<button class="btn btn-primary btn-lg btn-login" type="button"
									id="doRegister" onclick="doRegist()">注册</button>
							</div>
							<div class="control-col col-xs-12">
								<a class="btn btn-default btn-lg btn-login"
									href="${ctxPath }/login.do">已有帐号，立即登录</a>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
	<div style="text-align: center; font-size: 14px;">
		<p>Copyright &copy; 2018.Company name All rights reserved.</p>
	</div>
	<script src="${staticPath}/assets/js/bootstrap.js"
		type="text/javascript"></script>
	<script type="text/javascript"
		src="${staticPath}/jquery/Validform_v5.3.2_min.js"></script>
	<script type="text/javascript">
		var validResult; //用于表单验证
		var checkUserName; //用户名注册验证
		//检验输入的用户号是否已注册
		$("#userName").focus(function() {
			//用户号是否是数字判断
			var reg = / ^\d+$/;
			if (isNaN($("#userCode").val())) {
				layer.alert("用户号必须是数字！");
				return;
			} else {
				//进行用户名是否注册判断	
				$.ajax({
					data : {"userCode" : $("#userCode").val()},
					type : "post",
					url : ctxPath + "/register/checkUserCode.do",
					dataType : "json",
					success : function(data) {
						if (data.status == '1') {
							layer.alert("该用户号已被注册！");
							return;
						}

					}
				});
			}

		});

		
		//点击注册按钮
		function doRegist() {
			//验证输入的注册信息 
			validateAll();
			validUserName();
			//将账号的不符原因更新
			if (validResult&&checkUserName) {
				var userCode = $("#userCode").val();
				var userName = $("#userName").val();
				var userType = $("#userType").val();
				var password = $("#password").val();
				//进行注册	
				$.ajax({
					data : {
						"userCode" : userCode,
						"userName" : userName,
						"userType" : userType,
						"password" : password
					},
					type : "post",
					url : ctxPath + "/register/doRegister.do",
					dataType : "json",
					success : function(data) {
						if (data.status == '0') {
							layer.confirm("注册成功！是否去往登录页面？", {
								icon : 3
							}, function() {
								window.location.href = ctxPath + '/login.do';
							});

						} else {
							layer.alert("注册失败，请确认信息无误后重试，请勿重复注册！");
						}
					}
				});
			 }
	    	
		}
		
		
		function validUserName(){
			//checkUserName=false;
			//进行用户名是否注册判断	
			$.ajax({
				url: ctxPath + "/register/checkUserName.do",
				type:"post",
				dataType:"json",
				data:{"userName": $("#userName").val()},
				success:function(data){
					if(data.status=='1'){
						layer.alert("该用户名已经注册！");
						checkUserName= false;
					}else{
						
						checkUserName= true;
					}
				}
			})
		
		}
		
		function validateAll() {

			validResult = false;
			/*用户号验证userCode*/
			var userCode = $("#userCode").val();
			if (!userCode) {
				validResult = false;
				layer.alert("请输入用户号！");
				return;
			}

			/*用户名验证userName*/
			var userName = $("#userName").val();
			if (!userName) {
				validResult = false;
				layer.alert("请输入用户名！");
				return;
			}
			else if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(userName)) {
				validResult = false;
				layer.alert('用户名不能有特殊字符');
				return;
			}
			else if (/(^\_)|(\__)|(\_+$)/.test(userName)) {
				validResult = false;
				layer.alert('用户名首尾不能出现下划线\'_\'');
				return;
			}
			else if (/^\d+\d+\d$/.test(userName)) {
				validResult = false;
				layer.alert('用户名不能全为数字');
				return;
			}
			/*用户类型验证userType*/
			var userType = $("#userType").val();
			if (!userType) {
				validResult = false;
				layer.alert("请选择用户类型！");
				return;
			}

			/*密码验证password和checkPassword*/
			var password = $("#password").val();
			if (!password) {
				validResult = false;
				layer.alert("请输入密码！");
				return;
			}
			var checkPassword = $("#checkPassword").val();
			if (!checkPassword) {
				validResult = false;
				layer.alert("请二次确认密码！");
				return;
			}
			if (password != checkPassword) {
				validResult = false;
				layer.alert("两次输入的密码不一致！");
				return;
			}

			validResult = true;

			return validResult;
		}
	</script>
</body>
</html>
